<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);">删除</a></td>
        </tr>

    </table>

</body>
<script>
    let a = document.getElementsByTagName("a");
    for (let i = 0; i < a.length; i++) {
        a[i].setAttribute("onclick","drop(this)");
    }
    function drop(obj){
        //3.获取table元素
        let table = obj.parentElement.parentElement.parentElement;
        //4.获取tr元素
        let tr = obj.parentElement.parentElement;
        //5.通过table删除tr
        table.removeChild(tr);
    }
    //添加
    document.getElementById("add").onclick=function () {
        let addtr = document.createElement("tr");
        let td1 = document.createElement("td");
        td1.innerText=document.getElementById("name").value;
        let td2 = document.createElement("td");
        td2.innerText=document.getElementById("age").value;
        let td3 = document.createElement("td");
        td3.innerText=document.getElementById("gender").value;
        let td4=document.getElementsByTagName("a")[0].parentElement;
        let copy = td4.cloneNode(true);
        addtr.appendChild(td1);
        addtr.appendChild(td2);
        addtr.appendChild(td3);
        addtr.appendChild(copy);
        // addtr.appendChild(td4);
        document.getElementsByTagName("table")[0].appendChild(addtr);
    };
    //删除
    /*let adelete = document.getElementsByTagName("a");
    for (let i = 0; i < adelete.length; i++) {
            adelete[i].onclick=function () {
            let table = adelete[i].parentElement.parentElement.parentElement;
            let tr = adelete[i].parentElement.parentElement;
            table.removeChild(tr)
        }
    }*/

</script>
</html>